<html>
	<head>
		<link rel="stylesheet" type="text/css" href="clockStyle.css"></link>
		<script src="jquery-2.1.0.min.js"></script>
		<script>
			
			var debugMode = 1;
			
			var updateClockTick = setInterval(updateClock,1000);
			var getClockTick = setInterval(updateClock,1000);
			var getAlarmTick;
			var toggleStatus; 
			var returnedObject;
			var oldAlarmObject;
			

			
			updateClock();
			getAlarms();
			
			function modifyAlarm()
			{
				var inputObject = oldAlarmObject;
				
				inputObject.newAlarmName = document.getElementById("alarmName").value;
				inputObject.newAlarmHour = document.getElementById("alarmHours").value;
				inputObject.newAlarmMinutes = document.getElementById("alarmMinutes").value;
				alarmModifier(inputObject);
				
				if(returnedObject.formResponseCode == 0)
				{
					updateAlarms();
				}
				
				resetReturnedObject();
				
			}
			
			function prepareForms()
			{
				resetReturnedObject();
				prepareDates('alarmHours',1);
				prepareDates("alarmMinutes",2);
				setModifyToggle(false); 
				
				$("#addToggle").click(function()
				{
					if(toggleStatus == false)
					{
						newAlarm();
					}
					else
					{
						setModifyToggle(false);
						newAlarm();
					}
				});
				
				$("#modToggle").click(function()
				{
					if(toggleStatus == true)
					{
						modifyAlarm();
					}
					else
					{
						alert("Please select a clock first!");
					}
				});
				
				$("#getAlarmFormResult").change(function()
				{
					setModifyToggle(true);
					setModifyAlarm();
				});

			}
			
			function setModifyToggle(toggleFlag)
			{
				/*true = add mode | false = mod mode */
				
				if(toggleFlag)
				{
					document.getElementById("addToggle").className = "toggleInactive";
					document.getElementById("modToggle").className = "toggleActive";
					toggleStatus = true;
				}
				else
				{
					document.getElementById("modToggle").className = "toggleInactive";
					document.getElementById("addToggle").className = "toggleActive";
					toggleStatus = false;
				}
			}
			
			function updateClock()
			{
				var clockPHP = new XMLHttpRequest();

				clockPHP.onreadystatechange = function()
				{
					if (clockPHP.readyState == 4 && clockPHP.status==200)
					{
						document.getElementById("mainClock").innerHTML=clockPHP.responseText;
					}
				}

				clockPHP.open("GET","showTime.php",true);
				clockPHP.send();
			}
			
			function newAlarm()
			{
				var inputObject = new Object();
				
				inputObject.action = "addAlarm";
				inputObject.modifyToggle = toggleStatus;
				inputObject.alarmName = document.getElementById("alarmName").value;
				inputObject.alarmHour = document.getElementById("alarmHours").value;
				inputObject.alarmMinutes = document.getElementById("alarmMinutes").value;
				
				alarmModifier(inputObject);
				resetReturnedObject();
				
				updateAlarms();
			}
			
			function getAlarms()
			{
				clearInterval(getAlarmTick);
				var getAlarmPHP = new XMLHttpRequest();
				
				getAlarmPHP.open("GET","retrieveAlarms.php",true);
				getAlarmPHP.send();
				
				getAlarmPHP.onreadystatechange = function()
				{
					if (getAlarmPHP.readyState == 4 && getAlarmPHP.status==200)
					{
						document.getElementById("getAlarmFormResult").innerHTML = getAlarmPHP.responseText;
					}
				}
			}
			
			function updateAlarms()
			{
				var getAlarmTick = setInterval(function(){getAlarms();clearInterval(getAlarmTick);},1000);
			}
			
			function prepareDates(optionBoxID,clockComponent)
			{
				// Prepare date range boxes dependant on ID. range
				var clockLoop=0;
				var dateRange = "";
				var selectElement;
				switch (clockComponent)
				{
					//Hours
					case 1:
						for(clockLoop;clockLoop < 24;clockLoop++)
						{
							dateRange=dateRange + "<option>" + clockLoop + "</option>";
						}
						break;
					
					//Minutes and Seconds
					case 2:
						for(clockLoop;clockLoop < 60; clockLoop++)
						{
							dateRange=dateRange + "<option>" + clockLoop + "</option>";
						}
						break;
				}
				
				selectElement = document.getElementById(optionBoxID);
				selectElement.innerHTML = dateRange;
			}
			
			function deleteAlarm()
			{

				var oldAlarmObject = new Object();
				var successFlag = true;
				
				try
				{
					oldAlarmObject.alarmName = document.getElementById("getAlarmFormResult").options[document.getElementById("getAlarmFormResult").selectedIndex].getAttribute("data-alarmname");
					oldAlarmObject.alarmId = document.getElementById("getAlarmFormResult").options[document.getElementById("getAlarmFormResult").selectedIndex].value;
				}
				catch(exception)
				{
					successFlag = false;
					alert("No alarm is selected from the list");
				}
				
				if(successFlag == true)
				{
					oldAlarmObject.action = "delAlarm";
					alarmModifier(oldAlarmObject);

					if(returnedObject.formResponseCode == 0)
					{
						/*Script ran through successfully*/
						updateAlarms();
					}
				}
				
				
				resetReturnedObject();
				
			}
			
			function setModifyAlarm()
			{
				oldAlarmObject = new Object();
				var successFlag = true;
				
				try
				{
					oldAlarmObject.alarmName = document.getElementById("getAlarmFormResult").options[document.getElementById("getAlarmFormResult").selectedIndex].getAttribute("data-alarmname");
					oldAlarmObject.alarmId = document.getElementById("getAlarmFormResult").options[document.getElementById("getAlarmFormResult").selectedIndex].value;
					oldAlarmObject.alarmTime = document.getElementById("getAlarmFormResult").options[document.getElementById("getAlarmFormResult").selectedIndex].getAttribute("data-alarmtime");
				}
				catch(exception)
				{
					successFlag = false;
					alert("No alarm is selected from the list");
				}
				
				if(successFlag == true)
				{
					setModifyToggle(true);
					oldAlarmObject.action = "modAlarm";
					updateAddModify();
				}
			}
			
			function updateAddModify()
			{
				oldAlarmObject.action = "modAlarm";
				oldAlarmObject.modifyToggle = toggleStatus;
				document.getElementById("alarmName").value = oldAlarmObject.alarmName;
				oldAlarmObject.alarmHour = oldAlarmObject.alarmTime.substring(0,2);
				oldAlarmObject.alarmMinutes = oldAlarmObject.alarmTime.substring(2,4);
				$("#alarmHours").val(parseInt(oldAlarmObject.alarmHour));
				$("#alarmMinutes").val(parseInt(oldAlarmObject.alarmMinutes));
				
			}
			
			function resultClearTimer(resultID)
			{
				var resultClearTick = setInterval(function (){
					document.getElementById(resultID).innerHTML = "";
					clearInterval(resultClearTick);
				},4000);
			}
			
			function alarmModifier(inputObject)
			{
				var alarmObject = new Object();

				
				if(inputObject.action == "addAlarm" )
				{
					/* extra new alarm*/
					alarmObject = inputObject;

				}
				
				if(inputObject.action == "delAlarm")
				{
					/* extra deletion code*/
					alarmObject.action = inputObject.action;
					alarmObject.alarmId = inputObject.alarmId;
					alarmObject.alarmName = inputObject.alarmName;
					
				}
				if(inputObject.action == "modAlarm")
				{
					/* extra alarm modification */
					/*
					alarmObject.oldAlarmName = inputObject.alarmName;
					alarmObject.oldAlarmId = inputObject.alarmId;
					alarmObject.oldAlarmTimeHour = inputObject.alarmTimeHour;
					alarmObject.oldAlarmTimeMins = inputObject.alarmTimeMins;
					alarmObject.modifyToggle = toggleStatus;
					alarmObject.newAlarmName = document.getElementById("alarmName").value;
					alarmObject.newAlarmTimeHour = document.getElementById("alarmHours").value;
					alarmObject.newAlarmTimeMinutes = document.getElementById("alarmMinutes").value;*/
					
					alarmObject = inputObject;
				}
								
				var asyncAjax = $.ajax(
				{
					url:"alarmModify.php",
					type:"POST",
					data: "inputObject=" + encodeURIComponent(JSON.stringify(alarmObject)),
					complete: function (data,textStatus) {ajaxCallback(data,textStatus);},
				});

			}
			
			function ajaxCallback(data,textStatus)
			{
				if(debugMode == 1)
				{
					console.log("AJAX Callback:");
					console.log(data.responseText)
				}
				returnedObject = JSON.parse(data.responseText);
				
				if(returnedObject.formResponseCode == 0)
				{
					/*script completed and returned
					
					modifyAlarm.php will return a JSON string*/
					
					if(returnedObject.action == "delAlarm" || returnedObject.action == "addAlarm" || returnedObject.action == "modAlarm")
					{
						updateAlarms();
					}
				}
				else
				{
					/*Script errored out at some point. Output the error code and details included in the object*/
					
					alert(returnedObject.formResponseCode && ": " && returnedObject.formResponseText);
				}
				
			}
			
			function resetReturnedObject()
			{
			
				returnedObject = new Object();
				
			}
		
			
		</script>
			
		<title>Alarm</title>
	</head>
	<body onload="prepareForms();">
		<div id="main">
			<h1>Alarm System</h1>
			<br/>
			<span id="mainClock" class="clockFace" ></span>
			<br/>
			<!-- AddAlarm -->
			<span id="newAlarm" class="addAlarmForm">
			
				<!--
					This is an old part of the form. Deprecated due to names being a bit big for the box. Making the box bigger would not help the look of the form.
					
					<div id="newAlarmFormResult" class="addAlarmFormResult"></div>
				-->
				
				
				<table class="tableContent">
					<tr>
						<td style="width:100px;">
							<p>Name: </p>
						</td>
						<td style="width:100px;">
							<input id="alarmName" type="text"></input>
						</td>
					</tr>
					<tr>
						<td style="width:100px;">
							<p>Time: </p>-
						</td>
						<td style="width:100px;">
							<select id="alarmHours">
								<!-- Hours -->
							</select>
							<select id="alarmMinutes">
								<!-- Minutes -->
							</select>
						</td>
					</tr>
				</table>
				<div id="addToggle">Add</div>
				<div id="modToggle">Modify</div>
			</span>
			<span id="getAlarms" class="getAlarmForm">
				<h2>All Alarms</h2>
				<div id="getAlarmActionResult"></div>
				<br/>
				<table id="getAlarmFormContent">
					<tr>
						<td>
							<select id="getAlarmFormResult" multiple>
								<!-- Alarm List -->
							</select>
						</td>
					</tr>
					<tr>
						<td>
							<br/>
						</td>
					</tr>
					<tr>
						<td>
							<input type="button" onclick="deleteAlarm();" value="Delete Alarm" ></input>
						</td>
						<td>
							<input type="button" onclick="setModifyAlarm();" value="Modify Alarm"></input>
						</td>
					</tr>
				</table>
			</span>
			<br/>
		</div>
	</body>
</html>